<template>
  <div class="app-container">
    <!-- *************************************搜索区************************************* -->
    <!-- 分类 -->
    <PageSearch :showSearch.sync="showSearch" :getList="getList" :handleQuery="handleQuery" :resetQuery="resetQuery">
      <template #form>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
          <el-row>
            <el-form-item prop="skuNo">
              <el-input
                :placeholder="$t('sku编号')"
                v-model="queryParams.skuNo"
                clearable
                style="width: 240px"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item prop="spNo">
              <el-input
                :placeholder="$t('库位号')"
                v-model="queryParams.spNo"
                clearable
                style="width: 240px"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>

            <el-form-item prop="distrName">
              <el-input
                :placeholder="$t('供应商名称')"
                v-model="queryParams.distrName"
                clearable
                style="width: 240px"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>

            <el-form-item prop="skuNameCn">
              <el-input
                :placeholder="$t('中文名')"
                v-model="queryParams.skuNameCn"
                clearable
                style="width: 240px"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item prop="skuNameJp">
              <el-input
                :placeholder="$t('日文名')"
                v-model="queryParams.skuNameJp"
                clearable
                style="width: 240px"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-row>
          <el-row>
            <!-- <el-form-item prop="cloudFlag">
              <el-select :placeholder="$t('请选择是否开启云')" v-model="queryParams.cloudFlag">
                <el-option :label="$t('已开启')" value="1" />
                <el-option :label="$t('未开启')" value="0" />
              </el-select>
            </el-form-item> -->
            <el-form-item prop="spNo">
              <treeselect
                :appendToBody="true"
                :placeholder="$t('商品分类')"
                size="mini"
                v-model="queryParams.classId"
                :options="menuOptions"
                :show-count="true"
              />
            </el-form-item>
            <el-form-item prop="skuExtra">
              <el-input
                :placeholder="$t('额外sku')"
                v-model="queryParams.skuExtra"
                clearable
                style="width: 240px"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item prop="janCode">
              <el-input
                :placeholder="$t('jan编码')"
                v-model="queryParams.janCode"
                clearable
                style="width: 240px"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-row>
        </el-form>
      </template>

      <template #actions>
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAddData"
              v-hasPermi="['distribution:skuDistributor:add']"
            >
              {{ $t('新增') }}
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDeleteList"
              v-hasPermi="['distribution:skuDistributor:remove']"
            >
              {{ $t('删除') }}
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-upload
              class="upload-demo"
              multiple
              action="/"
              :auto-upload="false"
              :onChange="handleAddSkuImageList"
              :show-file-list="false"
            >
              <el-button type="warning" plain size="mini">
                {{ $t('图片上传') }}

                <el-tooltip effect="dark" placement="top-start">
                  <div slot="content">
                    <p>
                      {{ $t('供应商sku按钮加说明：') }}
                    </p>
                    <p>
                      {{ $t('批量主图上传只能初始化，不能修改已绑定的图片') }}
                    </p>
                    <p>
                      {{ $t('批量主图上传格式，把文件名改成sku') }}
                    </p>
                    <p>
                      {{ $t('例如 :J-(00000037).jpg') }}
                    </p>
                  </div>
                  <i style="cursor: pointer" class="el-icon-info"></i>
                </el-tooltip>
              </el-button>
            </el-upload>
          </el-col>

          <el-col :span="1.5">
            <el-button
              v-hasPermi="['distribution:skuDistributor:tempDownload']"
              @click="handleImport"
              type="primary"
              icon="el-icon-upload2"
              plain
              size="mini"
            >
              {{ $t('供应商批量导入') }}
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              icon="el-icon-download"
              type="warning"
              plain
              size="mini"
              v-hasPermi="['distribution:skuDistributor:export']"
              @click="handleExportData()"
            >
              {{ $t('sku导出(不带图片)') }}
              <el-tooltip effect="dark" placement="top-start">
                <div slot="content">
                  <p>{{ $t('sku导出不可用于批量导入') }}</p>
                </div>
                <i style="cursor: pointer" class="el-icon-info"></i>
              </el-tooltip>
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              icon="el-icon-download"
              v-hasPermi="['distribution:skuDistributor:exportImg']"
              type="warning"
              plain
              size="mini"
              @click="handleExportData(true)"
            >
              {{ $t('sku导出(带图片)') }}
              <el-tooltip effect="dark" placement="top-start">
                <div slot="content">
                  <p>{{ $t('sku导出不可用于批量导入') }}</p>
                </div>
                <i style="cursor: pointer" class="el-icon-info"></i>
              </el-tooltip>
            </el-button>
          </el-col>
        </el-row>
      </template>
    </PageSearch>
    <el-table
      @row-click="(row) => $rowClick(row, clickedRows)"
      :row-class-name="({ row }) => $tableRowClassName(row, clickedRows)"
      :height="calTableHeight()"
      @selection-change="handleSelectionChange"
      @sort-change="sortChange"
      v-loading="loading"
      :data="tableData"
      row-key="menuId"
      ref="tableRef"
    >
      <el-table-column type="selection" width="55" align="center" />
      <!-- sku -->
      <el-table-column align="center" show-overflow-tooltip prop="skuNo" :label="$t('sku编号')" custom-sort>
        <template #header="{ column }">
          <div class="sort-item">
            <div @click="resetSortQuery(column)">
              {{ column.label }}
            </div>
            <div class="sort-item-icon">
              <i
                class="el-icon-caret-top"
                @click="setSortQuery(column, 'asc')"
                :style="setSortIconStyle(column, 'asc')"
              />
              <i
                @click="setSortQuery(column, 'desc')"
                :style="setSortIconStyle(column, 'desc')"
                class="el-icon-caret-bottom"
              />
            </div>
          </div>
        </template>
        <template slot-scope="scope">
          <div @click="handleEdit(scope.row)" style="cursor: pointer; color: #1890ff">
            {{ scope.row.skuNo }}
          </div>
        </template>
      </el-table-column>
      <!-- 库位号 -->
      <el-table-column align="center" show-overflow-tooltip prop="spNo" :label="$t('库位号')" custom-sort>
        <template #header="{ column }">
          <div class="sort-item">
            <div @click="resetSortQuery(column)">
              {{ column.label }}
            </div>
            <div class="sort-item-icon">
              <i
                class="el-icon-caret-top"
                @click="setSortQuery(column, 'asc')"
                :style="setSortIconStyle(column, 'asc')"
              />
              <i
                @click="setSortQuery(column, 'desc')"
                :style="setSortIconStyle(column, 'desc')"
                class="el-icon-caret-bottom"
              />
            </div>
          </div>
        </template>
      </el-table-column>
      <!--  -->
      <el-table-column align="center" show-overflow-tooltip prop="skuExtra" :label="$t('额外sku')" custom-sort />
      <el-table-column align="center" show-overflow-tooltip prop="janCode" :label="$t('jan编码')" custom-sort />
      <el-table-column align="center" show-overflow-tooltip prop="distrName" :label="$t('供应商名称')" width="150" />
      <!-- 主图 -->
      <el-table-column :label="$t('主图')" prop="imgUrl" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 50px; height: 50px"
            fit="contain"
            :key="Math.random()"
            v-hover="scope.row.imgUrl"
            :src="scope.row.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
          />
        </template>
      </el-table-column>
      <!-- 中文名 -->
      <el-table-column align="center" show-overflow-tooltip prop="skuNameCn" :label="$t('中文名')">
        <template #header="{ column }">
          <div class="sort-item">
            <div @click="resetSortQuery(column)">
              {{ column.label }}
            </div>
            <div class="sort-item-icon">
              <i
                class="el-icon-caret-top"
                @click="setSortQuery(column, 'asc')"
                :style="setSortIconStyle(column, 'asc')"
              />
              <i
                @click="setSortQuery(column, 'desc')"
                :style="setSortIconStyle(column, 'desc')"
                class="el-icon-caret-bottom"
              />
            </div>
          </div>
        </template>
      </el-table-column>
      <!-- 日文名 -->
      <el-table-column align="center" show-overflow-tooltip prop="skuNameJp" :label="$t('日文名')">
        <template #header="{ column }">
          <div class="sort-item">
            <div @click="resetSortQuery(column)">
              {{ column.label }}
            </div>
            <div class="sort-item-icon">
              <i
                class="el-icon-caret-top"
                @click="setSortQuery(column, 'asc')"
                :style="setSortIconStyle(column, 'asc')"
              />
              <i
                @click="setSortQuery(column, 'desc')"
                :style="setSortIconStyle(column, 'desc')"
                class="el-icon-caret-bottom"
              />
            </div>
          </div>
        </template>
      </el-table-column>
      <!-- 数量 -->
      <el-table-column align="center" show-overflow-tooltip prop="stock" :label="$t('数量')">
        <template #header="{ column }">
          <div class="sort-item">
            <div @click="resetSortQuery(column)">
              {{ column.label }}
            </div>
            <div class="sort-item-icon">
              <i
                class="el-icon-caret-top"
                @click="setSortQuery(column, 'asc')"
                :style="setSortIconStyle(column, 'asc')"
              />
              <i
                @click="setSortQuery(column, 'desc')"
                :style="setSortIconStyle(column, 'desc')"
                class="el-icon-caret-bottom"
              />
            </div>
          </div>
        </template>
        <template slot-scope="{ row }">
          <span>
            {{ row.stock }}
          </span>
        </template>
      </el-table-column>

      <el-table-column show-overflow-tooltip :label="$t('价格')" align="center" prop="price" />
      <el-table-column show-overflow-tooltip :label="$t('云价格')" align="center" prop="cloudPrice">
        <template slot-scope="{ row }">
          <span class="table-item" @click="handleSetPriceMode(row)">
            {{ row.cloudPrice }}
          </span>
        </template>
      </el-table-column>
      <!-- 采购中数量 -->
      <el-table-column show-overflow-tooltip :label="$t('采购中数量')" align="center" prop="purchaseNum" />
      <!-- 最近采购时间 -->
      <el-table-column show-overflow-tooltip :label="$t('最近采购时间')" align="center" prop="purchaseTime" />
      <!-- <el-table-column
        show-overflow-tooltip
        :label="$t('是否开启云')"
        v-hasPermi="['distribution:skuDistributor:cloudFlag']"
        align="center"
        prop="cloudFlag"
        width="200">
        <template #header="{ column }">
          <div class="sort-item">
            <div @click="resetSortQuery(column)">
              {{ column.label }}
            </div>
            <div class="sort-item-icon">
              <i
                class="el-icon-caret-top"
                @click="setSortQuery(column, 'asc')"
                :style="setSortIconStyle(column, 'asc')" />
              <i
                @click="setSortQuery(column, 'desc')"
                :style="setSortIconStyle(column, 'desc')"
                class="el-icon-caret-bottom" />
            </div>
          </div>
        </template>
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.cloudFlag"
            :active-value="1"
            :inactive-value="0"
            @change="handleSwitchChange(scope.row)" />
        </template>
      </el-table-column> -->
      <el-table-column fixed="right" align="center" width="120">
        <template #header>
          <span @mouseover="isHoverOption = true">
            <!-- 操作 -->
            {{ $t('操作') }}
          </span>
        </template>
        <template #default="{ row }">
          <el-button type="text" @click="deleteData(row)" v-hasPermi="['distribution:skuDistributor:remove']">
            {{ $t('删除') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :pageSizes="pageSizes"
      v-show="pageTotal > 0"
      :total="pageTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- sku详情/修改 -->
    <Skucontmoduler @relaod="relaod" ref="Skucontmoduler"></Skucontmoduler>
    <!-- sku基本，报关，快递新增数据 -->
    <BasicExpressCustoms ref="BasicExpressCustoms" :activeNumbers="activeNumbers" :skuId="skuId"></BasicExpressCustoms>
    <!-- sku详详情弹框 -->
    <SkuDialog ref="SkuDialog" @closeDialog="closeDialog" :skuTitie="skuTitie" :childrenSkuId="childrenSkuId" />
    <!-- 批量图片上传弹框 -->
    <el-dialog :title="$t('sku图片列表')" :visible.sync="isShowDialog" width="900px" append-to-body>
      <!-- <div class="imagecontent">
        <div v-for="(item, index) in curentImageData" class="imagecontentChild">
          <el-image fit="contain" lazy v-loading="item.isUplaod" style="width: 100%;height: 100%;"
            :src=" 'data:image/jpeg;base64'+ item.baseUrl" />
          <div style="height: 20px; overflow: hidden;">{{ item.imgName.split('.')[0] }}</div>
        </div>
      </div> -->
      <el-table height="400" ref="tableRef" :data="curentImageData" width="100%">
        <el-table-column align="center" prop="imgName" :label="$t('图片')">
          <template slot-scope="scope">
            <el-image
              fit="contain"
              :key="Math.random()"
              v-hover="'data:image/jpeg;base64' + scope.row.baseUrl"
              style="width: 50px; height: 50px"
              :src="'data:image/jpeg;base64' + scope.row.baseUrl"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="imgName" :label="$t('图片名称')">
          <template slot-scope="{ row }">
            {{ row.imgName.split('.')[0] }}
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="imgName" :label="$t('上传状态')">
          <template slot-scope="{ row }">
            <span v-if="row.isUplaod == 0" style="color: #1890ff">
              <i class="el-icon-loading"></i>{{ $t('上传中') }}
            </span>
            <span v-if="row.isUplaod == 1" style="color: green">{{ $t('上传成功') }}</span>
            <span v-if="row.isUplaod == 2" style="color: red">{{ $t('上传失败') }}</span>
            <span v-if="row.isUplaod == 3" style="color: #e6a23c">{{ $t('待上传') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('失败原因')">
          <template slot-scope="{ row }">
            <span>{{ row.error ? row.error : '' }}</span>
          </template>
        </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="isClearCurentImageData">{{ $t('关闭') }}</el-button>
        <el-button type="primary" @click="submitCurentImage">{{ $t('确定') }}</el-button>
      </div>
    </el-dialog>
    <Import
      action="/distribution/skuDistributor/importAdd"
      templateUrl="distribution/skuDistributor/tempDownload"
      @success="getList"
      :show.sync="showImport"
    >
      <div slot="header" style="margin-bottom: 15px">
        {{ $t('下一个分配的sku') }}:
        <span style="font-weight: bold">{{ nextSku }}</span>
      </div>
    </Import>

    <SetPriceMode :show.sync="setPriceMode.show" @getList="getList" :formData="setPriceMode.formData" />
    <SetRules :show.sync="setRules.show" @getList="getList" :formData="setRules.formData" />
    <Num :show.sync="num.show" @getList="getList" :formData="num.formData" />
    <SwitchForm :show.sync="switchForm.show" @getList="getList" :formData="switchForm.formData" />
  </div>
</template>

<script>
import {
  cloudFlag,
  deleteDistributorSku,
  initSkuNo,
  skuDistributorGetDistributorSkuList,
  uploadSkuImg,
} from '@/api/distribution/sku/shopSkuPair'
import { checkPermi } from '@/utils/permission'

import { listSkuClassByLanguage } from '@/api/platform/goodsClassDict'
import Skucontmoduler from '@/components/Skucontmoduler'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import BasicExpressCustoms from './BasicExpressCustoms.vue'
import SetPriceMode from './component/setPriceMode.vue'
import SetRules from './component/setRules.vue'
import Num from './component/num.vue'
import SwitchForm from './component/switchForm.vue'
import SkuDialog from './skuDialog'

import Import from '@/components/Import/index.vue'
export default {
  activated() {
    this.$nextTick(() => this.$refs['tableRef']?.doLayout())
  },
  name: 'ShopSkuPair',
  components: {
    SkuDialog,
    Skucontmoduler,
    BasicExpressCustoms,
    Import,
    Treeselect,
    SetPriceMode,
    SetRules,
    Num,
    SwitchForm,
  },
  data() {
    return {
      setPriceMode: {
        show: false,
        formData: {},
      },
      setRules: {
        show: false,
        formData: {},
      },
      num: {
        show: false,
        formData: {},
      },
      switchForm: {
        show: false,
        formData: {},
      },
      /**点击的表格项 */
      clickedRows: [],
      /**商品分类菜单树选项 */
      menuOptions: [],
      showSearch: false,
      /***
       * 是否鼠标悬停操作
       */
      isHoverOption: false,
      /**
       * 导入组件的显示与隐藏
       */
      showImport: false,
      /**下一个分配的sku */
      nextSku: '',
      /**图片列表弹框显示 */
      isShowDialog: false,
      /**上传的文件列表 */
      curentImageData: [],
      /**价格模式 */
      priceModeInfo: {
        show: false,
        /**原始数据 */
        originForm: {},
        form: {},
      },
      /**预留库存 */
      preStoreInfo: {
        show: false,
        /**原始数据 */
        originForm: {},
        form: {},
      },
      skuId: '',
      activeNumbers: 0, // sku选中状态
      childrenSkuId: null, //sku详情的id
      skuTitie: '',
      type: '',
      title: '',
      deleteDataArr: [],
      single: false,
      multiple: false,
      pageSizes: [10, 20, 30, 50, 100, 150, 200, 300],
      curentData: {
        cloudStock: '',
        reserveStock: '',
        skuNameCn: '',
        skuNameJp: '',
      },
      editDialogConfig: false,
      tableData: [],
      /**数据总条数 */
      pageTotal: 0,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      curentDataRuler: {
        cloudStock: [
          {
            required: true,
            message: '请输入云数量',
            trigger: 'blur',
          },
        ],
        reserveStock: [
          {
            required: true,
            message: '请输入预留数量',
            trigger: 'blur',
          },
        ],
        priceMode: [
          {
            required: true,
            message: '请选择模式',
            trigger: 'blur',
          },
        ],
      },
      skuData: {},
    }
  },
  created() {
    this.getList()
    this.$getSkuClassList().then((res) => {
      this.menuOptions = res.menuOptions
    })
  },

  computed: {
    optionWidth: function () {
      return this.isHoverOption ? 250 : 50
    },
  },
  watch: {
    'queryParams.pageNum': function (val) {
      console.log(`val ==>`, JSON.parse(JSON.stringify(val)))
      this.clickedRows = []
    },
  },
  methods: {
    handleCommand(command, row) {
      switch (command) {
        case 'delete':
          this.deleteData(row)
          break

        default:
          break
      }
    },
    hasPermission(str) {
      return checkPermi([str])
    },
    handleNum(row) {
      this.num.formData = row
      this.num.show = true
    },
    handleSwitchForm(row) {
      this.switchForm.formData = row
      this.switchForm.show = true
    },
    handleSetRules(row) {
      this.setRules.formData = row
      this.setRules.show = true
    },
    handleSetPriceMode(row) {
      const flag = this.hasPermission('distribution:skuDistributor:setPriceMode')
      if (!flag) return
      this.setPriceMode.formData = row
      this.setPriceMode.show = true
    },
    sortChange(column) {
      function firstToUpper(str) {
        return str.slice(0, 1).toUpperCase() + str.slice(1)
      }
      // console.log(`column, prop, order  ==>`, column);
      const { order, prop } = column
      this.queryParams['sort' + firstToUpper(prop)] = order
      console.log(`this.queryParams ==>`, JSON.parse(JSON.stringify(this.queryParams)))
      // this.$refs["tableRef"].clearSort();
      this.$nextTick(() => {
        this.getList()
      })
    },
    handleImport() {
      initSkuNo().then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          this.showImport = true
          this.nextSku = data
        }
      })
    },
    /**sku导出 */
    handleExportData(isImg = false) {
      // 是否带图片，isImg：0-否  1-是
      const formDta = JSON.parse(JSON.stringify({ ...this.queryParams }))
      delete formDta.pageNum
      delete formDta.pageSize
      const idList = this.deleteDataArr.map((i) => i.id)
      const data = {
        ...formDta,
        isImg: isImg ? 1 : 0,
        idList: idList.toString(),
      }
      if (isImg) {
        this.$confirm(this.$t('带图片导出可能会很久,确认导出?'), this.$t('提示'), { type: 'warning' }) /** */
          .then(() => {
            this.download('/distribution/skuDistributor/export', data, `demo_${new Date().getTime()}.xlsx`)
          })
      } else {
        this.$confirm(this.$t('确认导出?'), this.$t('提示'), { type: 'warning' }) /** */
          .then(() => {
            this.download('/distribution/skuDistributor/export', data, `demo_${new Date().getTime()}.xlsx`)
          })
      }
    },
    /**图片上传列表确认按钮 */
    submitCurentImage() {
      this.uplaodSettimerImage(0)
      this.curentImageData.forEach((item) => {
        item.isUplaod = 0
      })
    },
    /**图片显示弹框是否清空 */
    isClearCurentImageData() {
      this.isShowDialog = !this.isShowDialog
      this.curentImageData = []
    },
    /**图片上传 */
    async handleAddSkuImageList(data) {
      this.curentImageData = []
      function uplaodImage() {
        return new Promise((resolve, reject) => {
          const reader = new FileReader()
          reader.readAsDataURL(data.raw)
          reader.onload = function () {
            resolve({
              imgName: data.name,
              baseUrl: reader.result,
              File: data.raw,
              isUplaod: 3,
              error: '',
            })
          }
        })
      }
      let backImage = await uplaodImage()
      this.curentImageData.push(backImage)
      this.isShowDialog = true
    },
    /**文件上传 */
    uplaodSettimerImage(activeNum) {
      const formData = new FormData()
      console.log(this.curentImageData[activeNum])
      formData.append('file', this.curentImageData[activeNum].File)
      uploadSkuImg(formData)
        .then((res) => {
          if (res.code == 200) {
            this.curentImageData.forEach((item) => {
              if (this.curentImageData[activeNum].imgName == item.imgName) {
                item.isUplaod = 1
              }
            })
            if (this.curentImageData[++activeNum]) {
              this.uplaodSettimerImage(activeNum)
            }
          }
        })
        .catch((error) => {
          this.curentImageData.forEach((item) => {
            console.log(this.curentImageData[activeNum].fileName, item.imgName)
            if (this.curentImageData[activeNum].imgName == item.imgName) {
              item.isUplaod = 2
              item.error = error
            }
          })

          if (this.curentImageData[++activeNum]) {
            this.uplaodSettimerImage(activeNum)
          }
        })
    },
    showDialog(dialogName, data) {
      const _data = JSON.parse(JSON.stringify(data))
      this[dialogName].show = true
      this[dialogName].form = data
      this[dialogName].originForm = _data
      // if (dialogName == 'priceModeInfo') this.priceModeInfo.form.priceMode = 1
      // if (dialogName == 'preStoreInfo') this.preStoreInfo.form.stockMode = 1
      // console.log(` ==>`, JSON.parse(JSON.stringify(this[dialogName].form)));
    },
    resetPriceModeForm(value) {
      this.priceModeInfo.form.cloudPrice = this.priceModeInfo.originForm.cloudPrice
      this.priceModeInfo.form.multipleRate = this.priceModeInfo.originForm.multipleRate
      // this.priceModeInfo.form.multipleRate = this.priceModeInfo.originForm.cloudPrice/this. priceModeInfo.form.price
    },
    rateChange(rate) {
      this.priceModeInfo.form.cloudPrice = (this.priceModeInfo.form.price * rate).toFixed(4)
    },
    relaod() {
      this.getList()
    },
    handleAddData(value) {
      this.$refs.BasicExpressCustoms.handleAddData()
    },
    // 关闭sku修改弹框处理函数
    closeDialog() {
      console.log('关闭sku修改弹框处理函数')
    },
    handleSwitchChange(row) {
      const { cloudFlag: flag } = row
      this.$confirm('是否继续操作', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          if (flag == 1) {
            this.handleSwitchForm(row)
            return
          }

          const data = {
            id: row.id,
            cloudFlag: flag,
            priceMode: row.priceMode,
            fixedPrice: row.fixedPrice,
            multipleRate: row.multipleRate,
            stockMode: row.stockMode,
            fixedNum: row.fixedNum,
            percent: row.percent,
          }
          console.log(`data ==>`, row)
          cloudFlag(data)
            .then((res) => {
              const { code, data, msg } = res
              if (code === 200) {
                this.$message({ type: 'success', message: msg })
                this.getList()
              }
            })
            .catch(() => {
              if (row.cloudFlag == 0) {
                row.cloudFlag = 1
              } else {
                row.cloudFlag = 0
              }
            })
        })
        .catch(() => {
          if (row.cloudFlag == 0) {
            row.cloudFlag = 1
          } else {
            row.cloudFlag = 0
          }
        })
    },
    handleEdit(row) {
      this.$refs.Skucontmoduler.setSkuInfo(row)
      this.$refs.Skucontmoduler.checkNumber('basicInformation')
    },
    // 新增
    handleAdd(data, type) {
      if (type == 'change') {
        this.skuData = {}
        this.activeNumbers = 0
        this.skuId = data.skuId
        this.addSkuInfor()
      }
    },
    // 新增sku
    addSkuInfor() {
      this.$refs.Skucontmoduler.PlusAddSku = !this.$refs.Skucontmoduler.PlusAddSku
    },
    // 获取供应商SKU详情
    methGetSkuDistributorDetails(row) {
      this.childrenSkuId = row.skuId
      this.$refs.SkuDialog.skuDialog = !this.$refs.SkuDialog.skuDialog
    },
    // 批量删除
    handleDeleteList() {
      let deleteDataArrStr = ''
      this.deleteDataArr.forEach((item, index) => {
        if (index != this.deleteDataArr.length - 1 && this.deleteDataArr.length > 1) {
          deleteDataArrStr += item.id + ','
        } else {
          deleteDataArrStr += item.id
        }
      })
      if (deleteDataArrStr) {
        this.handleDelete(deleteDataArrStr)
      }
    },
    // 删除
    handleDelete(ids) {
      const html = `
                    <div style="color:red">
                      <div>删除的sku编号不能再被重复使用</div>
                      <div>原则上不建议删除，而是修改sku内容，作为新的产品使用</div>
                    </div>
                   `

      this.$confirm(html, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        dangerouslyUseHTMLString: true,
      })
        .then(() => {
          deleteDistributorSku(ids)
            .then((res) => {
              this.$message({
                type: 'success',
                message: '删除成功!',
              })
              this.getList()
            })
            .catch((err) => {
              this.$message({
                type: 'error',
                message: '删除失败!',
              })
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },

    // 取消选择图片
    // 选择的数据
    handleSelectionChange(values) {
      this.deleteDataArr = values
    },
    // 图片

    // 删除供应商
    deleteData(data) {
      this.handleDelete(data.id)
    },
    // 取消申请
    cancel() {
      this.priceModeInfo.show = false
      this.preStoreInfo.show = false
      this.getList()
    },
    // 展示申请
    submitFormData(data, type) {
      this.type = type
      this.curentData = data
      this.editDialogConfig = !this.editDialogConfig
      if (type === 1) {
        this.title = '设置预留规则'
      } else if (type === 2) {
        this.title = '设置价格模式'
      }
    },
    /** 查询菜单列表 */
    getList() {
      this.loading = true
      skuDistributorGetDistributorSkuList(this.queryParams).then((res) => {
        this.tableData = res.rows
        // this.tableData=this.tableData.map((item)=>{
        //   return ...item
        //     // this.tableData.cloudFlagbtn = item.cloudFlag == 1? true : true
        //     // this.$set(this.tableData[], propertyName/index, value);
        //   })
        this.pageTotal = res.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.value1 = null
      Object.keys(this.queryParams).forEach((key) => {
        this.queryParams[key] = null
      })
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10

      this.getList()
    },

    /** 展开/折叠操作 */
    toggleExpandAll() {
      this.refreshTable = false
      this.isExpandAll = !this.isExpandAll
      this.$nextTick(() => {
        this.refreshTable = true
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.el-table .el-table__cell {
  padding: 4px 0 !important;
}

.imagecontent {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;

  .imagecontentChild {
    padding: 2px;
    border-radius: 4px;
    overflow: hidden;
    width: 100px;
    height: 100px;
    margin: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .imagecontentChild:hover {
    box-shadow: 2px 2px 4px 0px #dfd9d9, -2px -2px 6px 3px #dfd9d9;
  }
}

.goods {
  &-img {
    &-box {
      position: relative;
    }

    &-mini {
      height: 50px;
      border-radius: 3px;
    }
  }
}

.bigImg {
  border-radius: 3px;
  z-index: 10;
  position: fixed;
  width: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btns {
  opacity: 0;
  &:hover {
    opacity: 1;
  }
}

.table-item {
  color: blue;
  cursor: pointer;
}
</style>
